<template>
    <div class="pagination flex items-center justify-center space-x-2">
      <button
        :disabled="modelValue === 1"
        class="w-10 h-10 rounded border hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
        @click="emit('update:modelValue', modelValue - 1)"
      >
        <div class="i-mdi-chevron-left" />
      </button>
    
      <button
        v-for="page in displayPages"
        :key="page"
        :class="[
          'w-10 h-10 rounded border',
          page === modelValue
            ? 'bg-primary-600 text-white border-primary-600'
            : 'hover:bg-gray-50'
        ]"
        @click="emit('update:modelValue', page)"
      >
        {{ page }}
      </button>
    
      <button
        :disabled="modelValue === totalPages"
        class="w-10 h-10 rounded border hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
        @click="emit('update:modelValue', modelValue + 1)"
      >
        <div class="i-mdi-chevron-right" />
      </button>
    </div>
  </template>
  
  <script setup lang="ts">
  interface Props {
    modelValue: number
    totalPages: number
  }
  
  const props = defineProps<Props>()
  const emit = defineEmits(['update:modelValue'])
  
  const displayPages = computed(() => {
    const pages = []
    const current = props.modelValue
    const total = props.totalPages
    
    if (total <= 7) {
      for (let i = 1; i <= total; i++) {
        pages.push(i)
      }
    } else {
      if (current <= 4) {
        for (let i = 1; i <= 5; i++) pages.push(i)
        pages.push('...')
        pages.push(total)
      } else if (current >= total - 3) {
        pages.push(1)
        pages.push('...')
        for (let i = total - 4; i <= total; i++) pages.push(i)
      } else {
        pages.push(1)
        pages.push('...')
        for (let i = current - 1; i <= current + 1; i++) pages.push(i)
        pages.push('...')
        pages.push(total)
      }
    }
    
    return pages
  })
  </script>